{include "INC_header.html" title="会员余额管理"}
<div class="app-outlet" id="app-outlet">
    <a-config-provider :locale="config.locale" :theme="config.theme">
        <div class="app-container">
            <main class="container-wrap flex-column overflow-hidden padding">
                <!-- 筛选 -->
                <div class="radius light-background margin-bottom border">
                    <div class="ui flex-item padding" style="background: #eee;">
                        <div class="start">
                            <a-input-search
                                    v-model:value="keyword"
                                    placeholder="收银编号/订单号"
                                    enter-button="搜索"
                                    @search="setKeyword"
                            />
                        </div>
                        <div class="start" v-if="listQueryParams.keyword != ''">
                            <a-button type="primary" danger @click="setKeyword('')">
                                <template #icon><i class="fa fa-close margin-right-half"></i></template>
                                清除搜索
                            </a-button>
                        </div>
                        <div class="center"></div>
                    </div>
                    <div class="ui form padding-top padding">
                        <div class="fields">
                            <div class="field">
                                <label class="label text-small">付款方式</label>
                                <div class="">
                                    <a-select v-model:value="listQueryParams.payment" size="small" @change="getList" style="min-width: 150px;">
                                        <a-select-option value="all">全部</a-select-option>
                                        <a-select-option :value="payment.payment" v-for="payment in paymentList">{{ payment.name }}</a-select-option>
                                    </a-select>
                                </div>
                            </div>
                            <div class="field">
                                <label class="label text-small">处理状态</label>
                                <div class="">
                                    <a-radio-group v-model:value="listQueryParams.state" size="small" button-style="solid" @change="getList">
                                        <a-radio-button value="all">全部</a-radio-button>
                                        <a-radio-button value="0">已拒绝</a-radio-button>
                                        <a-radio-button value="2">待处理</a-radio-button>
                                        <a-radio-button value="1">退款成功</a-radio-button>
                                    </a-radio-group>
                                </div>
                            </div>
                            <div class="field">
                                <label class="label text-small">退款状态</label>
                                <div class="">
                                    <a-radio-group v-model:value="listQueryParams.refund" size="small" button-style="solid" @change="getList">
                                        <a-radio-button value="all">全部</a-radio-button>
                                        <a-radio-button value="0">未退款</a-radio-button>
                                        <a-radio-button value="2">退款中</a-radio-button>
                                        <a-radio-button value="1">退款成功</a-radio-button>
                                    </a-radio-group>
                                </div>
                            </div>
                            <div class="field">
                                <label class="label text-small">每页数量</label>
                                <div class="">
                                    <a-radio-group v-model:value="listQueryParams.total" size="small" button-style="solid" @change="getList">
                                        <a-radio-button :value="30">30</a-radio-button>
                                        <a-radio-button :value="50">50</a-radio-button>
                                        <a-radio-button :value="100">100</a-radio-button>
                                        <a-radio-button :value="200">200</a-radio-button>
                                    </a-radio-group>
                                </div>
                            </div>
                            <div class="field">
                                <label class="label text-small">上下页({{ list.page }}/{{ list.pages }}，共{{ list.rows }}行)</label>
                                <div class="">
                                    <a-button size="small" :disabled="list.page == 1" @click="prevPage"><i class="fa-solid fa-caret-left margin-right-half"></i> 上一页</a-button>
                                    <a-button :disabled="list.page >= list.pages" class="margin-left-half" size="small" @click="nextPage">下一页 <i class="fa-solid fa-caret-right margin-left-half"></i></a-button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <a-table v-if="list.rows > 0"
                         class="scroll-enable" :scroll="{ x:'max-content', y:'100%' }"
                         :loading="pageLoading"
                         :columns="columns"
                         :data-source="list.list"
                         :pagination="{
                                        current: list.page,
                                        defaultPageSize: listQueryParams.total,
                                        pageSize: listQueryParams.total,
                                        total: list.rows,
                                        showSizeChanger: false,
                                        onChange: setPage
                                    }"
                         row-key="id">
                    <template #info="{ column, record, index }">
                        <div class="text-tiny ui flex-item" style="padding-bottom: 5px;">
                            <div class="start">
                                <i class="fa-regular fa-clock orange-text"></i> <a-tooltip title="生成时间">{{ record.time }}</a-tooltip>
                            </div>
                            <div class="start">
                                <i class="fa-light fa-receipt orange-text"></i> <a-tooltip title="退款单号">{{ record.id }}</a-tooltip>
                            </div>
                            <div class="start">
                                <i class="fa-light fa-hashtag orange-text"></i> <a-tooltip title="收银单号">{{ record.cashierId }}</a-tooltip>
                            </div>
                            <div class="start">
                                <i class="fa-light fa-hashtag orange-text"></i> <a-tooltip :title="record.orderName + '订单号'">{{ record.orderId }}</a-tooltip>
                            </div>
                            <div class="start" v-if="record.uid > 0">
                                <i class="fa-regular fa-user orange-text"></i> <a-tooltip title="会员用户名">{{ record.username }}</a-tooltip>
                            </div>
                            <div class="start" v-if="record.uid > 0 && record.phone != '' && record.phone != null">
                                <i class="fa-light fa-mobile orange-text"></i> <a-tooltip title="手机号码">+{{ record.countryCode }} {{ record.phone }}</a-tooltip>
                            </div>
                            <div class="start" v-if="record.payedTradeNo != null && record.payedTradeNo != ''">
                                <i class="fa-light fa-hashtag orange-text"></i> <a-tooltip title="第三方交易流水号">{{ record.payedTradeNo }}</a-tooltip>
                            </div>
                            <div class="center"></div>
                        </div>
                        <div :class="'text-bold ' + (record.refund == 1 ? 'green-text' : (record.refund == 2 ? 'orange-text' : 'red-text'))">
                            {{ record.refund == 1 ? "已退款" : (record.refund == 2 ? "正在退款" : (record.state == 0 ? "已拒绝" : (record.state == 2 ? '处理中' : '已完成'))) }}
                        </div>
                        <div class="text-small medium-text">{{ record.bak || '-' }}</div>
                    </template>
                    <template #cpn="{ column, record, index }">
                        {{ record.cashierPaymentName }}
                        <div class="text-small orange-text" v-if="record.refund == 1">原路退回</div>
                    </template>
                    <template #operation="{ column, record, index }">
                        <a-button type="primary" danger @click="editItem(record)" v-if="record.state == 2">处理</a-button>
                        <span class="medium-text" v-else>{{ record.refund == 2 ? '正在退款' : '已处理' }}</span>
                    </template>
                    <template slot="emptyText">
                        没有数据
                    </template>
                </a-table>
                <div class="border radius justify-center text-center line45deg-background" style="background-color: #fff; flex: 1;" v-else>
                    <a-empty :image="simpleImage" description="没有退款数据"></a-empty>
                </div>
            </main>
        </div>
        <a-drawer v-model:open="drawerOpen" :width="400" @close="closeDrawer()" title="退款">
            <template #extra>
                <a-space>
                    <a-button @click="closeDrawer()">取消</a-button>
                    <a-button type="primary" @click="save" :loading="saveLoading">提交</a-button>
                </a-space>
            </template>
            <div class="ui form">
                <div class="field">
                    <div class="label">退款申请</div>
                    <div class="border radius primary-border border-dashed padding-half">
                        <div class="ui flex-item padding-half">
                            <div class="center">退款单号</div>
                            <div class="end text-bold">{{ item.info.id }}</div>
                        </div>
                        <div class="ui flex-item padding-half">
                            <div class="center">日期</div>
                            <div class="end text-bold">{{ item.info.time }}</div>
                        </div>
                        <div class="ui flex-item padding-half">
                            <div class="center">收银单号</div>
                            <div class="end text-bold">{{ item.info.cashierId }}</div>
                        </div>
                        <div class="ui flex-item padding-half">
                            <div class="center">订单类型</div>
                            <div class="end text-bold">{{ item.info.orderName }}</div>
                        </div>
                        <div class="ui flex-item padding-half">
                            <div class="center">订单号</div>
                            <div class="end text-bold">{{ item.info.orderId }}</div>
                        </div>
                        <div class="ui flex-item padding-half">
                            <div class="center justify-center">申请退款</div>
                            <div class="end text-bold text-bigger red-text">{{ item.info.amount }} {{ item.info.currencyUnit }}</div>
                        </div>
                        <div class="ui flex-item padding-half">
                            <div class="center justify-center">支付方式</div>
                            <div class="end text-bold text-right">{{ item.info.cashierPaymentName }}
                                <div class="text-small orange-text padding-top-half text-normal">建议原路退回</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="field">
                    <div class="label"><span class="red-text">*</span> 是否同意退款？</div>
                    <div class="inner-wrap">
                        <a-radio-group v-model:value="item.state">
                            <a-radio value="">不操作</a-radio>
                            <a-radio value="1">同意</a-radio>
                            <a-radio value="0">拒绝</a-radio>
                        </a-radio-group>
                    </div>
                </div>
                <div class="field" v-if="item.state != ''">
                    <div class="red-text text-center border radius border-dashed red-text line135deg-background padding"><i class="fa fa-warning"></i> 操作后不可撤销，请谨慎确认！</div>
                </div>
            </div>
        </a-drawer>
    </a-config-provider>
</div>
<script>
    //vue app
    const { createApp } = Vue;
    const { message, Modal, Empty } = antd;
    const app = createApp({
        data() {
            return {
                config: window.appProviderConfig,
                simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
                //列
                columns: [
                    { title: '退款信息', key: 'info', slots:{ customRender:'info' } },
                    { title: '应退', key: 'amount', dataIndex: 'amount', width: 150 },
                    { title: '已退', key: 'refundAmount', dataIndex: 'refundAmount', width: 150 },
                    { title: '单位', key: 'currencyUnit', dataIndex: 'currencyUnit', width: 60 },
                    { title: '支付方式', key: 'cpn', slots:{ customRender:'cpn' }, width: 150 },
                    { title: '操作', key: 'operation', width: 120, slots:{ customRender:'operation' } }
                ],
                keyword: '',
                listQueryParams: {
                    keyword: '',
                    page: 1,
                    total: 30,
                    payed: 'all',
                    admin: 1,
                    payment: 'all',
                    refund: '0',
                    state: '2'
                },
                list: {
                    rows: 0,
                    page: 1,
                    pages: 0,
                    list: []
                },
                paymentList: [],
                pageLoading: false,
                //
                drawerOpen: false,
                item: {
                    info: {

                    },
                    state: '',
                    bak: ''
                },
                saveLoading: false
            }
        },
        mounted() {
            this.initData();
        },
        methods: {
            initData() {
                //获取付款方式
                axios.get("{url url='/finance/api/cashier/paymentList'}").then(({ data }) => {
                    if (data.error === 0) {
                        this.paymentList = data.data;
                    }
                });
                //获取列表
                this.getList();
            },
            getList() {
                let self = this;
                self.pageLoading = true;
                const hide = message.loading("正在加载数据");
                axios.get("{url url='/finance/api/refund/list'}", {
                    params: this.listQueryParams
                }).then(({ data }) => {
                    hide();
                    self.pageLoading = false;
                    if (data.error === 0) {
                        self.list = data.data;
                    } else {
                        message.error(data.message);
                    }
                }).catch(() => {
                    hide();
                    self.pageLoading = false;
                    message.error("加载数据失败");
                });
            },
            //首页
            firstPage : function (){
                let page = parseInt(this.list.page);
                if(page > 1){
                    this.listQueryParams.page = 1;
                    this.getList();
                }
            },
            //上一页
            prevPage : function (){
                let page = parseInt(this.list.page);
                if(page > 1){
                    this.listQueryParams.page = page - 1;
                    this.getList();
                }
            },
            //下一页
            nextPage : function (){
                let page = parseInt(this.list.page);
                let pages = parseInt(this.list.pages);
                if(page < pages){
                    this.listQueryParams.page = page + 1
                    this.getList();
                }
            },
            //最后一页
            lastPage : function (){
                let page = parseInt(this.list.page);
                let pages = parseInt(this.list.pages);
                if(page < pages){
                    this.listQueryParams.page = pages;
                    this.getList();
                }
            },
            //设置跳到第几页
            setPage : function (page, pageSize){
                page = isNaN(page) ? -1 : parseInt(page);
                page = page > 0 ? page : -1;
                if(page === -1){
                    message.error('参数错误');
                }else {
                    this.listQueryParams.page = page;
                    this.listQueryParams.total = pageSize || this.listQueryParams.total;
                    this.getList();
                }
            },
            //设置参数，重载列表
            setListQueryParam : function (params){
                //通过替换key值的方式
                for(let key in params){
                    this.listQueryParams[key] = params[key];
                }
                this.getList();
            },
            //搜索
            setKeyword: function (value){
                if(this.listQueryParams.keyword != value){
                    this.listQueryParams.keyword = value;
                    this.getList();
                }
                if (value == '') {
                    this.keyword = '';
                }
            },
            //清除搜索
            cleanKeyword: function (){
                this.keyword = '';
                this.listQueryParams.keyword = '';
                this.getList();
            },
            editItem(item) {
                item = item || {};
                this.item = {
                    info: item,
                    state: ''
                };
                this.drawerOpen = true;
            },
            closeDrawer() {
                this.drawerOpen = false;
            },
            save() {
                if (this.saveLoading) return;
                if (this.item.bak == '') {
                    return message.error("请填写此次操作的原因");
                }
                this.saveLoading = true;
                axios.post("{url url='/finance/api/refund/confirm'}", {
                    id: this.item.info.id,
                    state: this.item.state,
                    bak: this.item.bak
                }).then(({ data }) => {
                    this.saveLoading = false;
                    if (data.error === 0) {
                        //重载列表
                        message.success("保存成功");
                        this.getList();
                        this.closeDrawer();
                    } else {
                        message.error(data.message);
                    }
                }).catch(() => {
                    this.saveLoading = false;
                    message.error("服务端繁忙");
                }).finally(() => {
                    this.saveLoading = false;
                });
            }
        }
    }).use(antd);
    //挂载
    const vm = app.mount("#app-outlet");
</script>
{include "INC_footer.html"}